/* 登录界面样式 */

/* 配置登录界面对话框 */
.login-dialog {
    /* 配置对话框的高度与宽度 */
    width: 400px;
    height: 400px;
    /* 区分出登录对话框,加背景颜色
       并设置一个透明度,使样式好看一些*/
    background-color: rgba(255, 255, 255, 0.8);
    /* 把边框的棱角钝化 */
    border-radius: 10px;
}

/* 配置标题 */
.login-dialog h3 {
    /* 设置位置 */
    text-align: center;
    /* 设置内边距 */
    padding: 50px 0; 
}

/* 针对一行配置样式 */
.login-dialog .row {
    width: 100%;
    height: 50px;
    /* 设置弹性布局 */
    display: flex;
    /* 设置位置 */
    align-items: center;
    justify-content: center;
}

/* 对行中内部元素进行样式配置 */
.login-dialog .row span {
    width: 100px;
    /* 设置文字粗细 */
    font-weight: 700;
}

/* 对输入框配置样式 */
#username, #password, #ackpassword {
    width: 200px;
    height: 40px;
    /* 设置内部输入文字的样式 */
    font-size: 20px;
    line-height: 40px;
    /* 设置文字与边框的距离 */
    padding-left: 10px;
    /* 去除边框与轮廓线 */
    border: none;
    outline: none;
    /* 钝化边框棱角 */
    border-radius: 10px;
    /* 设置背景颜色 */
    background-color: aliceblue;
}

/* 配置按钮的样式 */
#submit {
    width: 300px;
    height: 50px;
    /* 设置按钮背景颜色 */
    background-color: rgb(0, 128, 0);
    /* 设置按钮文字颜色 */
    color: white;
    /* 去除按钮边框与轮廓线,钝化棱角 */
    border: none;
    outline: none;
    border-radius: 10px;
    /* 设置与输入框之间的距离 */
    margin-top: 20px;
}

/* 配置按钮点击后的样式 */
#submit:active {
    background-color: #666;
}
